<template>
  <div ref="swiperContainer">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "star-swiper",
};
</script>
<script setup>
import { ref, onMounted, defineProps, defineExpose, onUnmounted, provide } from "vue";
import Swiper from "swiper";
const swiperContainer = ref(null);
const swiper = ref(null);
const props = defineProps({
  autoplay: {
    type: [Boolean, Object],
    default: false,
  },
  loop: {
    type: Boolean,
    default: false,
  },
  direction: {
    type: String,
    default: "horizontal",
  },
  height: {
    type: Number,
    default: 300,
  },
  init: {
    type: Boolean,
    default: true,
  },
});

onMounted(() => {
  swiper.value = new Swiper(swiperContainer.value, {
    ...props,
  });
});

onUnmounted(() => {
  swiper.value.destroy();
});
provide("swiper", swiper);
defineExpose({ swiper });
</script>
<style scoped lang="less"></style>
